<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 500px;
				height: 300px;
				margin: 0 auto;
			}
			
			.border-t-a {
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">

			<hr class="border-t-a">

			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">

				<el-form-item label="问题：" prop="theme">
					<el-input v-model="form.theme"></el-input>
				</el-form-item>
				<el-form-item label="解答：">
					<el-input type="textarea" autosize v-model="form.anwser"></el-input>
				</el-form-item>
				<el-form-item prop="type" label="类型：">
					<el-select v-model="form.type" placeholder="请选择类型">
						<el-option label="客户服务" :value="471" :key="471"></el-option>
						<el-option label="客户投诉" :value="472" :key="472"></el-option>
						<el-option label="客户维修" :value="473" :key="473"></el-option>
						<el-option label="客户关怀" :value="474" :key="474"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<script>
			var vms = new Vue({
				el: "#app",
				data() {
					return {
						form: {
							theme: '',
							type: '',
							anwser: '',
							id: '',

						},
						//验证规则
						rules: { //数据源model
							theme: [{
								required: true,
								message: '请输入问题',
								trigger: 'blur'
							}],
							anwser: [{
								required: true,
								message: '请输入解答',
								trigger: 'blur'
							}],
							type: [{
								required: true,
								message: '请选择类型',
								trigger: 'blur'
							}]
						}

					}
				},
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								var par = null;
								if(JSON.stringify(${
										qa
									}) === '{}') {
									par = "/qaform";
								} else {
									par = "/editerQaform";
								}
								//post提交数据
								axios.post(par,
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									window.parent.location.href = "/getQAty";
								}).catch(function() {
									alert("出错了");
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},

				},
				mounted() {
					var news = ${
						qa
					};
					if(JSON.stringify(news) != '{}') {
						this.form.theme = news.qa_name;
						this.form.id = news.qa_id;
						this.form.anwser = news.qa_anwser;
						this.form.type = news.qa_type;

					}
				}
			});
		</script>
	</body>

</html>